import React, { useEffect } from "react";
import Loader from "/src/components/Loader/Loader";
import Filter from "/src/components/Filter/Filter";
import Products from "/src/components/Products/Products";
import Cart from "/src/components/Cart/Cart";
import * as S from "./style";

import useProducts from "/src/contexts/products-context/useProducts";

const App = () => {
  const { isFetching, products, fetchProducts } = useProducts();
  useEffect(() => {
    fetchProducts();
  }, [fetchProducts]);
  return (
    <S.AppContainer>
      {isFetching && <Loader />}
      <S.TwoColumnGrid>
        <S.Side>
          <Filter />
        </S.Side>
        <main>
          <S.MainHeader>
            <p>{products?.length} Product(s) found</p>
          </S.MainHeader>
          <Products products={products} />
        </main>
      </S.TwoColumnGrid>
      <Cart />
    </S.AppContainer>
  );
};

export default App;
